<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../js/babel.min.js"></script>
    <script src="../../js/react.development.js"></script>
    <script src="../../js/react-dom.development.js"></script>
    <script src="../../js/prop-types.js"></script>
</head>
<body>
    <div id="example1"></div>
</body>

</html>
<script type="text/babel">
/**
 * 非受控组件还要自动手动操作dom
 * 受控组件不需要调用操作dom，虽然书写更麻烦，但是更符合react的思想
 * /
//onChange和原生的onchange事件不同，只要变化就会修改
class App extends React.Component{
   constructor(props){
       super(props)
       this.state={
           pwd:''
       }
      this.save=this.save.bind(this)
      this.handleChange=this.handleChange.bind(this)
   }
   save(){
       console.log(this.input.value);
   }
   handleChange(event){
       const pwd=event.target.value;
       //如果使用下面，永远输入不进去
    //    const pwd=this.state.pwd;
       this.setState({pwd})
       console.log(this.state.pwd)
   }
    render(){
        return (
            <div>
                非受控组件 <br/>
                <input type="text" ref={input=>this.input=input}/><button onClick={this.save}>点击</button> <br/>   
                受控组件 <br/>
                <input type="text" value={this.state.pwd} onChange={this.handleChange}/>    
            </div>
        )
    }
}

ReactDOM.render(<App/>,document.getElementById('example1'))

</script>